@import "public";

#edit {
  .ae-top {
    width: 100%;
    .height(128rem);
    .paddingLeft(30rem);
    .paddingRight(30rem);
    .paddingTop(20rem);
    .paddingBottom(20rem);
    .borderBottom(2rem, solid, #d7d1d1);
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
    .aet-title {
      width: 100%;
      .fontSize(32rem);
      color: #111111;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .marginBottom(10rem);
    }
    .aet-info {
      width: 100%;
      .aet-date {
        color: #bbbbbb;
        .fontSize(24rem);
        float: left;
        .marginRight(30rem);
        .marginTop(6rem);
      }
      .aet-num {
        .paddingLeft(40rem);
        background: url("../images/has-read.png") left center no-repeat;
        .backSize(36rem, 21rem);
        .fontSize(24rem);
        float: left;
        .marginTop(6rem);
      }
      .aet-edit {
        .width(39rem);
        .height(40rem);
        background: url(../images/edit.png) center no-repeat;
        .backSize(39rem, 40rem);
        float: right;
      }
    }
  }
  .ae-top-edit {
    width: 100%;
    .height(80rem);
    .paddingLeft(30rem);
    .paddingRight(30rem);
    //.paddingTop(10rem);
    //.paddingBottom(10rem);
    .borderBottom(2rem, solid, #d7d1d1);
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    .ate-write {
      .width(490rem);
      height: 100%;
      float: left;
      .atew-input {
        .width(490rem);
        height: 100%;
        .fontSize(28rem);

      }
    }
    .ate-complete {
      .width(85rem);
      .height(44rem);
      text-align: center;
      .lineHeight(44rem);
      color: #ffffff;
      .fontSize(24rem);
      float: left;
      background-color: #ff886e;
      .borderRadius(8rem);
      .marginTop(20rem);
    }
  }
  .ae-content {
    .padding(0, 30rem, 0, 30rem);
    ul li {
      .marginBottom(20rem);
      float: left;
      .ae-img {
        float: left;
        .width(80rem);
        .height(80rem);
        .borderCircle();
        img {
          display: block;
          .width(80rem);
          .height(80rem);
        }
      }
      .ace-con {
        .width(480rem);
        .border(2rem, solid, #dcd9d9);
        .borderRadius(8rem);
        position: relative;
        float: left;
        background-color: #ffffff;
        .marginLeft(20rem);
        .left-icon {
          position: absolute;
          .width(13rem);
          .height(18rem);
          .left(-13rem);
          .top(30rem);
          background: url(../images/left-arr.png) left center no-repeat;
          .backSize(13rem, 18rem);
        }
      }
      .aec-audio {
        .height(80rem);
        //background: url(../images/audio.png) no-repeat #ffffff;
        //.backPosition(30rem, 15rem);
        //.backSize(27rem, 44rem);
        position: relative;
        .playicon{
          .width(27rem);
          .height(44rem);
          position: absolute;
          .left(20rem);
          .top(20rem);
          img{
            .width(27rem);
            .height(44rem);
            display: block;
          }
        }
        .videonum{
          position: absolute;
          .left(80rem);
          .top(20rem);
          .fontSize(24rem);
          color: #666666;
        }
      }
      .aec-picture {
        .height(268rem);
        overflow: hidden;
        img.p-pic {
          .width(458rem);
          .height(249rem);
          .marginAuto(8rem, 10rem);
          display: block;
        }
      }
      .aec-text {
        height: auto;
        p {
          width: 100%;
          .padding(20rem, 10rem, 20rem, 10rem);
          .fontSize(24rem);
          color: #111111;
          .lineHeight(42rem);
          word-break:break-all;
        }
      }
    }
    .aec-choose {
      .width(60rem);
      .height(55rem);
      float: left;
      position: relative;
      display: none;
      .aecc-input {
        .width(60rem);
        .height(55rem);
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 899;
      }
      .aecc-img {
        .width(60rem);
        .height(55rem);
        opacity: 1;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 898;
        background: url(../images/circle.png) right center no-repeat;
        .backSize(40rem, 40rem);
      }

    }
  }
  .of-delete {
    width: 100%;
    //background-color: #f4f1f1;
    .height(80rem);
    .padding(0, 30rem, 0, 30rem);
    position: fixed;
    .top(100rem);
    .left(0);
    z-index: 999;
    display: none;
    .of-trash {
      .width(28rem);
      .height(39rem);
      background: url(../images/trash.png) right center no-repeat;
      .backSize(28rem, 39rem);
      display: block;
      float: right;
      .marginTop(16rem);
    }

  }
  .jd-show {
    display: none;
  }
  .move-pos {
    width: 100%;
    .height(52rem);
    background: url(../images/move.png) center no-repeat;
    .backSize(640rem, 52rem);
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1000;
    opacity: 0;
    //display: none;
  }
  .bottom-edit {
    width: 100%;
    //.height(100rem);
    .minHeight(100rem);
    .borderTop(2rem, solid, #d7d1d1);
    .padding(0, 30rem, 0, 30rem);
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 999;
    .be-record {
      .width(44rem);
      .height(44rem);
      float: left;
      .marginTop(20rem);
      .marginTop(20rem);
      position: absolute;
      .bottom(28rem);
      .left(28rem);
      .ber-record{
        display: block;
      }
      .ber-key{
        display: none;
      }
      img{
        .width(44rem);
        .height(44rem);
        display: block;
        .marginAuto(0,0);
      }
    }
    .be-write{
      .width(350rem);
      //.height(62rem);
      float: left;
      .marginTop(28rem);
      .marginLeft(60rem);
      .marginRight(16rem);
      .marginBottom(16rem);
      //position: absolute;
      //.left(88rem);
      //.top(26rem);
      outline: none;
      .editor{
        .width(350rem);
        //.height(62rem);
        .lineHeight(42rem);
        .fontSize(28rem);
        resize: none;
        display: block;
        .borderBottom(2rem,solid,#ff886e);
      }
      .no-press{
        .width(350rem);
        .height(50rem);
        display: none;
        background: url(../images/no-press.png) no-repeat center;
        .backSize(350rem,50rem);
        user-select:none;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        img{
          .width(350rem);
          .height(50rem);
          display: none;
          .marginAuto(0,0);
        }
      }
      .has-press{
        .width(350rem);
        .height(50rem);
        display: none;
        background: url(../images/no-press.png) no-repeat center;
        .backSize(350rem,50rem);
        user-select:none;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        img{
          .width(350rem);
          .height(62rem);
          display: block;
          .marginAuto(0,0);
        }
      }
    }
    .be-bold{
      .width(44rem);
      .height(44rem);
      float: left;
      .marginTop(28rem);
      position: absolute;
      .bottom(28rem);
      .left(460rem);
      .beb-true{
        display: none;
      }
      .beb-false{
        display: block;
      }
      img{
        .width(44rem);
        .height(44rem);
        display: block;
        .marginAuto(0,0);
      }
    }
    .be-send-img{
      position: absolute;
      .bottom(28rem);
      .left(520rem);
      .width(86rem);
      .height(46rem);
      .marginTop(28rem);
      //.marginLeft(20rem);
      float: left;
      .be-img{
        .width(66rem);
        .height(46rem);
        display: none;
        float: right;
        position: relative;
        .be-upload{
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          top: 0;
          left: 0;
          z-index: 889;
        }
        .be-picture{
          .width(66rem);
          .height(46rem);
          opacity: 1;
          top: 0;
          right: 0;
          z-index: 900;
          display: block;
        }
      }
      .be-send{
        .width(86rem);
        .height(46rem);
        display: block;
        img{
          .width(86rem);
          .height(46rem);
          display: block;
        }
      }
    }
  }
  .startrecording{

  }
}
#isRecording{
  .width(277rem);
  .height(271rem);
  background: url(../images/recording.png) center no-repeat;
  .backSize(277rem,271rem);
  position: fixed;
  .bottom(200rem);
  left: 50%;
  .marginLeft(-138.5rem);
  z-index: 9999;
}
